<!DOCTYPE html>
<html>
	<!-- 2.新制作一个页面，要求：
	       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
	       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#id1 {
				width: 200px;
				height: 200px;
				background-color: #7FFF00;
			}

			#id2 {
				width: 300px;
				height: 300px;
				background-color: aqua;
			}

			#id3 {
				width: 400px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<h1 id="h1_id" class="h1_class">开始代码内容</h1>
		<button type="button" id="get_h1">获取h1</button>
		<br>
		<div id="id1">这是第一个div</div>
		<div id="id2" class="div_class">这是第二个div</div>
		<div id="id3">这是第三个div</div>
		<button type="button" id="get_div" >获取div</button>h
		<br>
		<img src="../img/CgoTql2cCNeAa6stAAPXwj7aa8w463.jpg" style="width: 450px;height: 350px;" id="img_id" class="img_class">
		<br>
		<button type="button" id="get_img">获取img</button>
		<br>
		<ul id="ul_id">
			<li>
				<p id="p_id">1</p>
				<p class="p_class">2</p>
				<p>3</p>
				<p>4</p>
				<p>5</p>
			</li>
		</ul>
		<button type="button" id="get_p">获取p</button>
		<br>
	</body>
	<script type="text/javascript">
		function findDiv(){
						console.log("S 获取div")
						console.log(document.getElementById("id1"));
						console.log(document.getElementsByClassName("div_class"));
						console.log(document.getElementsByTagName("div"));
						console.log("E 获取div")
		}
		document.getElementById("get_div").onclick=findDiv;
		
		function findP(){
						console.log("S 获取p")
						console.log(document.getElementById("p_id"));
						console.log(document.getElementsByClassName("p_class"));
						console.log(document.getElementsByTagName("p"));
						console.log("E 获取p")
		}
		document.getElementById("get_p").onclick=findP;
		
		function findiMG(){
						console.log("S 获取IMG")
						console.log(document.getElementById("img_id"));
						console.log(document.getElementsByClassName("img_class"));
						console.log(document.getElementsByTagName("img"));
						console.log("E 获取IMG")
		}
		document.getElementById("get_img").onclick=findiMG;
		
		function findH1(){
						console.log("S 获取h1")
						console.log(document.getElementById("h1_id"));
						console.log(document.getElementsByClassName("h1_class"));
						console.log(document.getElementsByTagName("h1"));
						console.log("E 获取h1")
		}
		document.getElementById("get_h1").onclick=findH1;
		
	</script>
</html>
